<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="css/searchBox-3d01.css">
    <title>searchBox-3d01</title>
    <style>
        .tips {
            text-align: center;
            font-size: 24px;
            text-indent: -2em;
        }
        .qqr {
            position: absolute;
            bottom: 10px;
            width: 200px;
        }
        .qqr:first-of-type {
            left: 10px;
        }
        .qqr:last-of-type {
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="searchBox">
        <div class="box3d-01">
            <div class="front"></div>
            <div class="mid">
                <div class="search-content">
                    <input type="text" placeholder="Input Something here!">
                </div>
                <div class="btn iconfont icon-sousuo"></div>
            </div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="search-cube">
                <div class="btn search-cube-left"></div>
                <div class="btn iconfont icon-sousuo search-cube-front"></div>
                <div class="btn iconfont icon-sousuo search-cube-back"></div>
                <div class="btn iconfont icon-sousuo search-cube-top"></div>
                <div class="btn iconfont icon-sousuo search-cube-bottom"></div>
            </div>
        </div>
    </div>
    <div class="tips">
        ---- html + css3 + js ----<br>
        <img src="media/swing.gif" class="qqr">
        <img src="media/swing.gif" class="qqr">
    </div>
    <script>
        window.addEventListener('load', function () {
            let btns = document.querySelectorAll('.btn');

            for (let i = 0; i < btns.length; i++) {
                btns[i].addEventListener('click', function () {
                    let text = document.querySelector('.search-content input').value;
                    if (text != ''){
                        let url = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=' + text;
                        window.open(url);
                    }
                });
            }
        
            document.querySelector('.search-content input').addEventListener('keyup', function(e){
                let text = document.querySelector('.search-content input').value;
                if (text != '' && e.key == 'Enter'){
                    btns[0].click();
                }
            });
        });
    </script>
</body>

</html>